@charset "utf-8";
@import "reset";
$fs:170.66px;
html {
    font-size: $fs;
}

@function r($px) {
    @return $px/$fs*1rem;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f7f7f7;
    margin-bottom: r(80px);
    button {
        outline: none;
    }
}

header {
    border-bottom: r(1px) solid #c1c1c1;
    .container {
        display: flex;
        width: 100%;
        height: r(88px);
        font-size: 0px;
        .item {
            font-size: r(35px);
        }
        //      返回按钮
        .item:first-of-type {
            margin-top: r(26px);
            margin-left: r(29px);
            button {
                outline: none;
                width: r(22px);
                height: r(37px);
                font-size: r(40px);
                background-color: #f7f7f7;
                color: #848689;
            }
        }
        //      标题
        .item:nth-of-type(2) {
            margin-top: r(20px);
            margin-left: r(69px);
            font-size: 0;
            white-space: nowrap;
            button {
                color: #FFFFFF;
                width: r(200px);
                height: r(60px);
                font-size: r(28px);
            }
            button:first-of-type {
                border-bottom-left-radius: r(8px);
                border-top-left-radius: r(8px);
                background-color: #d62d31;
            }
            button:last-of-type {
                background-color: #FFFFFF;
                color: #d62d31;
                border: r(2px) solid #d62d31;
                border-bottom-right-radius: r(8px);
                border-top-right-radius: r(8px);
            }
        }
        //      放大镜
        .item:last-of-type {
            margin-top: r(27px);
            margin-left: r(63px);
            width: r(36px);
            i{
                font-size: r(30px);
            }
            button {
                outline: none;
                height: r(37px);
                background-color: #f7f7f7;
                width: r(62px);
                font-size: r(30px);
                color: #666666;
            }
        }
    }
}

section {
    .title {
        font-size: r(26px);
        height: r(80px);
        background-color: #ffffff;
        border-bottom: r(1px) solid #e3e3e3;
        ul {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100%;
            li {
                height: 100%;
                line-height: r(80px);
                color: #666666;
            }
            .border{
                border-bottom: r(4px) solid #d62d31;
            }
        }
    }
    .box {
        margin-top: r(20px);
        
        border-top: r(1px) solid #e3e3e3;
        background-color: #FFFFFF;
        .number {
            display: flex;
            height: r(75px);
            justify-content: space-around;
            align-items: center;
            p:first-of-type {
                font-size: r(24px);
                color: #333333;
            }
            p:last-of-type {
                font-size: r(26px);
                color: #d62d31;
            }
        }
        .apple {
            display: flex;
            border-top: r(1px) solid #e1e2e4;
            border-bottom: r(1px) solid #e1e2e4;
            align-items: center;
            justify-content: space-around;
            background-color: #ffffff;
            .apple_img {
                width: r(120px);
                height: r(120px);
                border: r(1px) solid #d7d7d7;
                font-size: 0;
                text-align: center;
                img {
                    margin-top: r(1px);
                    width: 98%;
                    height: 98%;
                }
            }
            .text {
                font-size: r(22px);
                height: r(172px);
                margin-left: r(24px);
                margin-top: r(28px);
                h3 {
                    color: #333333;
                    font-weight: 500;
                }
                p {
                    color: #666666;
                }
                p:first-of-type {
                    margin-top: r(15px);
                    margin-bottom: r(15px);
                }
            }
            .btn {
                margin-right: r(15px);
                font-size: 0;
                button {
                    font-size: r(38px);
                    background: #ffffff;
                    color: #bfbfbf;
                    outline: none;
                }
            }
        }
        .end {
            display: flex;
            height: r(69px);
            border-bottom: r(1px) solid #e1e2e4;
            align-items: center;
            background-color: #ffffff;
            p {
                font-size: r(26px);
            }
            p:first-of-type {
                margin-left: r(20px);
                margin-right: r(21px);
            }
            p:nth-of-type(3) {
                font-size: r(28px);
                margin-top: r(6px);
                margin-right: r(90px);
            }
            p:last-of-type {
                span {
                    color: #d62d31;
                }
            }
        }
    }
    
    .rou {
        border-top: r(1px) solid #e3e3e3;
        background-color: #FFFFFF;
        margin-top: r(20px);
        .number {
            display: flex;
            height: r(75px);
            justify-content: space-around;
            align-items: center;
            p:first-of-type {
                font-size: r(24px);
                color: #333333;
            }
            p:last-of-type {
                font-size: r(26px);
                color: #d62d31;
            }
        }
        .rou_box{
            height: r(202px);
            display: flex;
            border-top: r(1px) solid #e1e2e4;
            border-bottom: r(1px) solid #e1e2e4;
            align-items: center;
//          justify-content: space-around;
            background-color: #ffffff;
            .rou_img {
                width: r(120px);
                height: r(120px);
                border: r(1px) solid #d7d7d7;
                font-size: 0;
                text-align: center;
                img {
                    margin-top: r(1px);
                    width: 98%;
                    height: 98%;
                }
            }
            .rou_img:first-of-type{
                margin-left: r(20px);
            }
            .rou_img:nth-of-type(2){
                margin-left: r(13px);
                margin-right: r(13px);
            }
            .jianshu{
                margin-left: r(104px);
                margin-right: r(25px);
                p{
                    font-size: r(26px);
                }
            }
            .btn {
                margin-right: r(15px);
                font-size: 0;
//              
                button {
                    font-size: r(38px);
                    background: #ffffff;
                    color: #bfbfbf;
                    outline: none;
                }
            }
        }
        .end {
            display: flex;
            height: r(69px);
            border-bottom: r(1px) solid #e1e2e4;
            align-items: center;
            background-color: #ffffff;
            p {
                font-size: r(26px);
            }
            p:first-of-type {
                margin-left: r(20px);
                margin-right: r(21px);
            }
            p:nth-of-type(3) {
                font-size: r(28px);
                margin-top: r(6px);
                margin-right: r(90px);
            }
            p:last-of-type {
                span {
                    color: #d62d31;
                }
            }
        }
    }
}